<%@ page import="java.util.List" %>
<%@ page import="booksystem.entity.Book" %><%--
  Created by IntelliJ IDEA.
  User: 18383
  Date: 2023/3/9
  Time: 19:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<html>
<head>
    <title></title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/recommend.css">
    <style>
        body {
            background-color: rgb(240, 240, 242);
        }

        .book-info {
            background: white;
            height: auto;
            margin-bottom: 10px;
            border-radius: 5px;
            padding: 12px 18px 12px 0;
        }

        .book-avatar {
            width: 190px;
            height: 210px;
            float: left;
            margin-right: 20px;
        }

        .book-avatar img {
            width: 100%;
            height: 100%;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }

        .book-detail {
            padding: 14px 0;
        }

        .title {
            font-size: 18px;
            font-weight: 600;
            overflow: hidden;
            height: 32px;
            line-height: 32px;
            margin-bottom: 10px;
            /*white-space: nowrap;*/
            /*text-overflow: ellipsis;*/
        }

        .detail {
            letter-spacing: 0.5px;
            margin-bottom: 35px;
        }

        .detail .text {
            height: 24px;
            line-height: 24px;
            color: #646464;
            font-size: 14px;
        }

        .price {
            line-height: 26px;
            overflow: hidden;
            font-size: 26px;
            position: relative;
            height: 36px;

            color: #c30;
            float: left;
            font-weight: bold;
            margin-right: 12px;
        }

        .buy-box-btn {
            float: right;
        }

        .buy-box-btn .part-buy-btn, .buy-now-btn {
            margin-right: 20px;
            border-radius: 5px;
            outline: none;
            border: none;
        }

        .part-buy-btn, .part-buy-btn:hover, .part-buy-btn:focus {
            color: #fff;
            background: red;
            outline: 0;
        }

        .buy-now-btn, .buy-now-btn:hover, .buy-now-btn:focus {
            color: red;
            border: 1px solid red;
            background-color: #ffedee;
            outline: none;

        }

        a, a:hover {
            text-decoration: none;
            color: #333333;
        }

        .item .content-info, .context {
            width: 100%;
            margin-bottom: 10px;
            background: white;
            padding: 2px 16px;
        }

        h2 {
            font-size: 18px;
            color: #007722;
        }

        .content-info > p {
            text-indent: 2em;
            font-size: 13px;
        }
    </style>
</head>
<body>
<jsp:include page="layout/nav.jsp"></jsp:include>
<div class="container">
    <div class="item col-md-9">
        <div class="book-info clearfix">
            <div class="book-avatar">
                <img src="${requestScope.book_detail.cover}" id="book_cover">
            </div>
            <div class="book-detail">
                <div class="hidden" id="book_id">${requestScope.book_detail.id}</div>
                <div class="title">${requestScope.book_detail.name}</div>
                <div class="detail">
                    <div class="text">作者:${requestScope.book_detail.author}</div>
                    <div class="text">出版社:${requestScope.book_detail.publish}</div>
                    <div class="text">出版时间:${fn:substring(requestScope.book_detail.publish_time, 0, 7)}
                    </div>
                </div>
                <div class="price">
                    <span class="sign">¥</span>
                    <span id="one_price">${requestScope.book_detail.price}</span>
                </div>
                <div class="buy-box-btn">
                    <% String username = (String) session.getAttribute("username");
                        if (username != null) {%>
                    <div class="hidden" id="user_id">${sessionScope.user_id}</div>
                    <span class="text-muted">购买数量:</span>
                    <input type="number" name="buy_num" id="buy_num" value="1" min="1" max="99" style="height: 26px;width: 40px;outline: none;margin-right: 20px">
                    <button class="btn-sm part-buy-btn" id="addCart">
                        <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> 加入购物车
                    </button>
                    <button class="btn-sm buy-now-btn" id="addOrder">立即购买</button>
                    <% } else { %>
                    <span style="margin-right: 40px; color: red">登录后可购买</span>
                    <% } %>
                </div>
            </div>
        </div>
        <div class="content-info">
            <h2>内容简介...</h2>
            <p>${requestScope.book_detail.detail}</p>
        </div>
        <div class="content-info">
            <h2>作者简介...</h2>
            <p>${requestScope.book_detail.author_detail}</p>
        </div>
        <div class="context">
            <h2>目录</h2>
            <p>${requestScope.book_detail.context}</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="panel panel-success">
            <div class="panel-heading"><i class="fa fa-commenting" aria-hidden="true"></i> 推荐书籍</div>
            <%
                //循环显示数据
                List book_list = (List) request.getAttribute("random_book");  // 取request里面的对象队列
                if (book_list.size() != 0) {
                    for (int i = 0; i < book_list.size(); i++) {
                        pageContext.setAttribute("book", book_list.get(i));
                        //保存到页面pageContext里面方便下面进行EL表达式调用
            %>
            <div class="panel-body clearfix">
                <a href="/book?m=detail&bid=${ book.id }">${ book.name }</a>
                <div class="panel-price">
                    <span>￥</span>
                    <span>${ book.price }</span>
                </div>
                <p class="hidden-line"></p>
            </div>
            <%
                }
            } else {
            %>
            没有更多了 ~ ~ ~
            <%
                }
            %>
        </div>
    </div>


</div>

</div>
<script src="static/js/jquery-3.6.3.min.js"></script>
<script src="static/plugins/bootstrap-3.4.1/js/bootstrap.min.js"></script>
<script src="static/js/jsEmail.js"></script>
<script src="static/js/addBookToCart.js"></script>
</body>
</html>
